<template>
	<div>
	<!-- 热门城市 -->
	<div class="hcity">
		<div class="hcity-title">
			热门城市
		</div>
		<ul class="hcity-list">
			<li v-for="(item ,index) in hotcites" :key='index' @click="changeCityName(item.name)">{{item.name}}</li>
		</ul>
	</div>
	
	<!-- 字母排列 -->
	<div class="sort">
		<div class="sort-title">
			字母排序
		</div>
		<ul class="sort-list">
			<li v-for="(item ,index) in citys" :key='index'>{{item.initial}}</li>
		</ul>
	</div>
	
	<!-- list城市首字母列表 -->
	<div class="city">
		<div v-for="(list , index) in citys" :key='index' >
			<div class="city-title">{{list.initial}}</div>
			<ul class="city-list">
				<li v-for="(item ,index) in list.list" @click="changeCityName(item.name)">{{item.name}}</li>
			</ul>
		</div>
	</div>
	</div>
</template>

<script>
	//引入vuex里的mutations状态
	import {mapMutations} from 'vuex'
	export default{
		props:['hotcites' , 'citys'],
		methods:{
			//点击城市：点击跳转首页
			changeCityName(cityName){ //接收传递过来的值
			//当点击事件触发的同事，将会触发vuex里面的mutations里的changeCity函数
				this.changeCity(cityName)
				//跳转首页
				this.$router.push('/')
			},
			//导出nutations里的changeCity（）函数
			...mapMutations(['changeCity'])
		},
		
	}
</script>

<style scoped>
	/* 热门城市 */
	.hcity{
		width: 100%;
		font-size: 0.28rem;
	}
	.hcity-title{
		padding: 0.2rem 0.3rem;
	}
	.hcity-list{
		background-color: white;
		overflow: hidden;
		position: relative;
	}
	/* 在li标签之前创建一个虚拟标签，覆盖在ul上方，避免标签之间的内容冲突 */
	.hcity-list::before{
		content: "";
		position: absolute;
		/* 生成一个宽度与li同宽，高度与ul同高的虚拟标签 */
		width: 33.333%;
		height: 100%;
		/* 移动一个li宽度的位置，为了覆盖每一行的第二个li */
		left: 33.333%;
		border-left: 1px solid #ddd;
		border-right: 1px solid #ddd;
	}
	.hcity-list li{
		width: 33.333%;
		height: 0.9rem;
		text-align: center;
		line-height: 0.9rem;
		float: left;
		border-bottom: 1px solid #ddd;
		position: relative;
	}
	
	
	/* 字母排列 */
	.sort{
		width: 100%;
		font-size: 0.28rem;
	}
	.sort-title{
		padding: 0.2rem 0.3rem;
	}
	.sort-list{
		background-color: white;
		overflow: hidden;
	}
	
	.sort-list li{
		width: 16.666%;
		height: 0.9rem;
		text-align: center;
		line-height: 0.9rem;
		float: left;
	}
	
	
	/* list城市首字母列表  */
	.city{
		width: 100%;
		font-size: 0.28rem;
	}
	.city-title{
		padding: 0.2rem 0.3rem;
	}
	.city-list{
		background-color: white;
		overflow: hidden;
		position: relative;
	}
	/* 在li标签之前创建一个虚拟标签，覆盖在ul上方，避免标签之间的内容冲突 */
	.city-list::before{
		content: "";
		position: absolute;
		/* 生成一个宽度与li同宽，高度与ul同高的虚拟标签 */
		width: 25%;
		height: 100%;
		/* 移动一个li宽度的位置，为了覆盖每一行的第二个li */
		left: 25%;
		border-left: 1px solid #ddd;
		border-right: 1px solid #ddd;
	}
	/* 在最后一个li之后，创建一个虚拟标签，覆盖在每一行倒数第二个li上方 */
	.city-list::after{
		content: '';
		position: absolute;
		width: 25%;
		height: 100%;
		/* background-color: #00BCD4; */
		right: 25%;
		border-right: 1px solid #ddd;
		position: relative;
	}
	.city-list li{
		width: 25%;
		height: 0.9rem;
		text-align: center;
		line-height: 0.9rem;
		float: left;
		border-bottom: 1px solid #ddd;
		position: relative;
	}
</style>
